<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>帕纸</title>
	<link rel="stylesheet" href="${ctx}/css/main.css">
	<link rel="stylesheet" href="${ctx}/css/bootstrap.min.css">
	<link rel="stylesheet" href="${ctx}/css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="${ctx}/css/square.css">
	<link rel="stylesheet" href="${ctx}/css/blue.css">
	<script type="text/javascript" src="${ctx}/js/jquery.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/jquery.form.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/icheck.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/stickUp.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/button.js"></script>
	<script type="text/javascript" src="${ctx}/js/bootstrap-typeahead.js"></script>
	<!-- develop js -->
	<script type="text/javascript" src="${ctx}/js_develop/main/common.js"></script>
	<script type="text/javascript" src="${ctx}/js_develop/main/index.js"></script>

</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div id="navbar" class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
				<li class="active"><a href="./">首页</a></li>
				<li><a href="">2</a></li>
				<li><a href="">3</a></li>
			</ul>
		</div>
	</div>
</nav>

<div class="container main-body">

<div class="row" style="margin-top: 20px;padding: 0px;">
<div class="col-md-3">
	<div class="panel panel-default">
		<div class="panel-body" style="padding: 5px;">
			<a href="#" style="height: 80px;padding: 0 1px;background-color: #0084B4;width: 100%;display: block;">
			</a>

			<div style="display: block;">
				<a href="#" style="background-color: #fff;margin: -30px 0 0 8px;padding: 1px;display: inline-block;"><img src="images/profile.png"
																														  style="width: 75px;height: 75px;border: 2px solid #fff;"></a>

				<div style="position: absolute;width: 185px;left: 120px;top: 103px;">
					<div style="line-height: 21px;font-weight: 700;
  font-size: 18px;">
						<a href="#" style="color: inherit;">Huang</a>
					</div>
				</div>


				<div style="display: block;margin-left: 10px;padding: 10px 0;">
					<ul style="padding: 0;">
						<li style="width: 1%;display: table-cell;"><a href="#"><span>纸条</span><br><span>2</span></a></li>
						<li style="width: 1%;display: table-cell;"><a href="#"><span>涉足范围</span><br><span>2</span></a></li>
						<li style="width: 1%;display: table-cell;"><a href="#"><span>影响力</span><br><span>2</span></a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- main content -->
<div class="col-md-6">
<div class="note-content-box">
	<img src="images/portrait.png" class="note-portrait">

	<div class="note-comment-box">
	<@spform.form class="content-form" id="note-form" action="${ctx}/action/share" method="post">
		<div class="notice" id="note-content" contenteditable="true" tabindex="-1">
			<div>分享,就是现在</div>
		</div>

		<div class="note-custom">
			<div class="row" style="margin-top: 10px;">
				<div class="col-xs-4">
					<input type="text" id="note-role" class="form-control note-tag" data-href="${ctx}/main/tags/role" placeholder="Role" data-provide="typeahead"
						   autocomplete="false">
					<input type="hidden" id="note-role-ids" name="role">
				</div>
				<div class="col-xs-4">
					<input type="text" id="note-location" class="form-control note-tag" data-href="${ctx}/main/tags/location" placeholder="Location" data-provide="typeahead"
						   autocomplete="false">
					<input type="hidden" id="note-location-ids" name="location">
				</div>
				<div class="col-xs-4">
					<input type="text" id="note-incident" class="form-control note-tag" data-href="${ctx}/main/tags/incident" placeholder="Incident" data-provide="typeahead"
						   autocomplete="false">
					<input type="hidden" id="note-incident-ids" name="incident">
				</div>
			</div>
			<div class="toolbar">
				<button type="button" id="share" data-loading-text="Loading..." class="btn btn-primary share-button" autocomplete="off">
					分享
				</button>
			</div>
		</div>
	</@spform.form>
	</div>
</div>

<!-- tabs-->
<ul class="nav nav-tabs custom-tabs" role="tablist">
	<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">角色</a></li>
	<li role="presentation"><a href="#home" data-toggle="tab">地点</a></li>
	<li role="presentation"><a href="#home" data-toggle="tab">事件</a></li>
	<li role="presentation" class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
			更多<span class="caret"></span>
		</a>
		<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="extra_tags" style="width: 300px;">
			<table class="table table-hover" style="margin: -5px 0 0 0;">
				<thead>
				<tr>
					<th>角色</th>
					<th>地点</th>
					<th>事件</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<th>
						<li role="presentation"><a href="" data-toggle="tab">按时打算</a></li>
					</th>
					<th>
						<li role="presentation"><a href="" data-toggle="tab">按时打算</a></li>
					</th>
					<th>
						<li role="presentation"><a href="" data-toggle="tab">按时打算</a></li>
					</th>
				</tr>
				<tr>
					<th>
						<a href="">按时打算</a>
					</th>
					<th>
						<a href="">按时打算</a>
					</th>
					<th>
						<a href="">按时打算</a>
					</th>
				</tr>
				<tr>
					<th>
						<a href="">按时打算</a>
					</th>
					<th>
						<a href="">按时打算</a>
					</th>
					<th>
						<a href="">按时打算</a>
					</th>
				</tr>
				<tr>
					<th>
						<a href="">按时打算</a>
					</th>
					<th>
						<a href="">按时打算</a>
					</th>
					<th>
						<a href="">按时打算</a>
					</th>
				</tr>


				</tbody>
			</table>
		</ul>
	</li>

	<!-- 自定义组合 -->
	<li role="presentation" class="dropdown" style="float: right;padding: 0px;">
		<a class="dropdown-toggle " data-toggle="dropdown" href="#" aria-expanded="false">
			<span class="glyphicon glyphicon-list" style="font-size: 16px;" aria-hidden="true"></span>
		</a>
		<ul class="dropdown-menu" role="menu" id="custom_tags" style="width: 300px;">
			<table class="table table-hover" style="margin: -5px 0 0 0;">
				<thead>
				<tr>
					<th>角色</th>
					<th>地点</th>
					<th>事件</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td>
						<input type="radio" name="role" id="role-1"><label for="role-1">角色1</label>
					</td>
					<td>
						<input type="radio" name="location" id="location-1"><label for="location-1">地点1</label>
					</td>
					<td>
						<input type="radio" name="incident" id="incident-1"><label for="incident-1">事件1</label>
					</td>
				</tr>

				<tr>
					<td>
						<input type="radio" name="role" id="role-2"><label for="role-2">角色2</label>
					</td>
					<td>
						<input type="radio" name="location" id="location-2"><label for="location-2">地点2</label>
					</td>
					<td>
						<input type="radio" name="incident" id="incident-2"><label for="incident-2">事件2</label>
					</td>
				</tr>

				<tr>
					<td>
						<input type="radio" name="role" id="role-3"><label for="role-3">角色3</label>
					</td>
					<td>
						<input type="radio" name="location" id="location-3"><label for="location-3">地点3</label>
					</td>
					<td>
						<input type="radio" name="incident" id="incident-3"><label for="incident-3">事件3</label>
					</td>
				</tr>
				<tr>
					<td>
						<input type="radio" name="role" id="role-4"><label for="role-4">角色4</label>
					</td>
					<td>
						<input type="radio" name="location" id="location-4"><label for="location-4">地点4</label>
					</td>
					<td>
						<input type="radio" name="incident" id="incident-4"><label for="incident-4">事件4</label>
					</td>
				</tr>


				</tbody>
			</table>
		</ul>
	</li>
</ul>


<div class="tab-content">
	<div role="tabpanel" class="tab-pane active" id="home">
		<div class="panel-body">
			<div class="row">
			<#if page.getResult()??>
				<#list page.getResult() as note>
					<div class="media note-media" id="${note.noteId}">
						<div class="media-body">
							<div class="thumbnail">
								<div class="caption">
									<a class="pull-left" href="">${note.sharer.realName}</a>

									<p><strong>
										<a href="blog_detail.html">博客标题</a>
									</strong></p>

									<p class="lead" style="margin-bottom: 10px;">${note.shareContent}</p>
									<hr style="margin-top: 10px;">
									<p class="small_hr">自定义class内容，如作者，标签等</p>
									<hr>
									<div>
										<img src="images/portrait.png" class="note-portrait">

										<div class="note-comment-box">
											<div class="comment-notice" id="comment_content" contenteditable="true">
												<div style="height: auto;font-size: 13px;">添加回复</div>
											</div>
										</div>

									</div>
								</div>
							</div>
						</div>
					</div>
				</#list>
			</#if>
			</div>
		</div>
	</div>
</div>
</div>

<div class="col-md-3">

</div>
</div>
</div>
<input id="init-data" type="hidden" value='{"authenticity_token":"${token}"}'>
</body>
</html>